<template>
    <div class="xiangqing">
        <div class="toubu animate__animated animate__fadeInDown">
            <div class="al">
                <img src="@/assets/images/zn.png" alt="">
            </div>
            <div class="title">
                <div class="bt">育商风险提示</div>
                <div class="zi">根据育商风控指标，对【张亮麻辣烫】进行经</div>
            </div>
        </div>
        <div class="shuju animate__animated animate__fadeInUp">
            <div class="title">
                商户坪效数据
            </div>
            <div class="tu">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="kshItem">
                            <img src="@/assets/images/qipao.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="kshItem">
                            <div class="title">商户排名</div>
                            <el-table :row-class-name="rowStyle" :header-cell-style="{ 'text-align': 'center' }"
                                :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%">
                                <el-table-column prop="name" label="商家" width="180">
                                </el-table-column>
                                <el-table-column prop="address" label="面积" width="180">
                                </el-table-column>
                                <el-table-column prop="xiao" sortable label="销售额">
                                </el-table-column>
                                <el-table-column prop="ping" sortable label="坪效">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="content">
                根据上周坪效分析排行数据显示[张亮麻辣德] 的

                <span>坪效为-30 </span>
                ，无法支持该商户的正常经营运转
            </div>
        </div>
        <div class="ksh">
            <el-row :gutter="20">
                <el-col :span="12" v-for="(item, i) in list" :key="i">
                    <div :class="'kshItem animate__animated animate__fadeInUp animate__delay-0' + i * 3 + 's'">
                        <div class="title">
                            {{ item.title }}
                        </div>
                        <div class="tu">
                            <img :src="require(`@/assets/images/xq_ksh${i + 1}.png`)" alt="">
                        </div>

                        <div class="content">
                            {{ item.content }}
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="jianyi">
            <div class="jianyiT">
                <div class="xiaoji">
                    <img src="@/assets/images/zn.png" alt="">
                </div>
                <div class="title1">智能建议</div>
            </div>
            <div class="con">
                <div> 1.从商家经营发展维度判断，建议推动张亮麻辣烫店家进行服务品质提升，和某品质量优化，参与商区举办的各类营销活动</div>
                <div>2.从商区业态健康发展维度判断，建议替换IP，或换租铺</div>
            </div>
        </div>
        <div class="bnt">
            <div class="tian" @click="to(1)">去提案</div>
            <div class="quxiao" @click="to(2)">稍后处理</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    title: '一周内客进店率',
                    content: '根据一周内客流进店率分析，有70%经流量，有27%的客户到店门口驻足但并未进入店内。只有3%的客户进店消费',
                },
                {
                    title: '一周内店铺消费漏斗图',
                    content: '根据一周内店铺消费漏斗分析，平均消费额度在10-29元3000人，20-29元2000人，3(-39元1000人，99-150元500人，150元及以上200人',
                },
            ],
            tableData: [
                {
                    name: '和田转角',
                    address: 68,
                    xiao: 5.802,
                    ping: 100,
                },
                {
                    name: '而非刀削面',
                    address: 134,
                    xiao: 3.567,
                    ping: 51.69,
                },
                {
                    name: '老奶奶烤梨',
                    address: 23,
                    xiao: 1.546,
                    ping: 16.92,
                },
                {
                    name: '瑞幸咖啡',
                    address: 34,
                    xiao: 2.563,
                    ping: 12.73,
                },
                {
                    name: '张亮麻辣烫',
                    address: 100,
                    xiao: 300,
                    ping: -30,
                },
            ]
        }
    },
    mounted() {
        ;
    },
    methods: {
        name() {

        },
        to(num) {
            if (num == 1) {
                this.$router.push({
                    path: '/govIndexData2/duihua',

                })
            } else {
                this.$router.go(-1)
            }
        },
        rowStyle({ row, rowIndex }) {
            if (row.name == '张亮麻辣烫') {
                return 'hong';
            } else {
                return '';
            }
        }
    },
}
</script>


<style lang="scss" scoped>
/deep/ {
    .hong {
        background: rgba(249, 88, 88, 0.77);
        border: 1px solid #C11515;
        color: #FFFFFF;

        td:nth-child(1) {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        td:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        &:hover>td {
            background-color: transparent !important;
        }
    }

    .el-table tbody tr:hover>td {
        background-color: transparent !important;
    }
}

.xiangqing {
    height: 100%;
    overflow-y: auto;
    // box-sizing: border-box;

    .toubu {
        box-sizing: border-box;
        padding: 0 24px;
        height: 88px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
        border-radius: 12px;

        .al {
            width: 51px;
            height: 52px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                margin-right: 8px;
            }
        }

        .title {
            font-size: 20px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.9);

            .zi {
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.5);
            }
        }

    }

    .shuju {
        margin: 32px 0 24px;
        // height: 474px;
        background: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
        border-radius: 12px;
        box-sizing: border-box;
        padding: 24px;

        .title {
            font-size: 16px;
            font-weight: 600;
            color: #000000;
        }

        .tu {
            display: flex;
            margin: 20px 0;


            .kshItem {
                padding-left: 30px;

                /deep/ {
                    .el-table .sort-caret {
                        width: 0 !important;
                    }

                    .has-gutter tr {


                        background: #F8F9FA;


                        th {

                            background: #F8F9FA;
                        }


                        // width: 28px;
                        // height: 20px;
                        font-size: 14px;
                        // font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #000000;
                        // line-height: 20px;
                    }
                }

                .title {
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.9);
                    margin-bottom: 16px;
                }

            }


        }

        .content {
            background: #F8F9FA;
            border-radius: 8px;
            padding: 30px 18px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.6);

            span {
                color: #FC1E02;
            }
        }

    }

    .ksh {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        .kshItem {
            background: #FFFFFF;
            box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
            border-radius: 12px;
            padding: 24px;

            .title {
                font-size: 16px;
                font-weight: 600;
                color: #000000;
            }

            .tu {
                margin: 30px 0 40px;
                display: flex;
                justify-content: center;
            }

            .content {
                padding: 20px 32px;
                background: #F8F9FA;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.6);
            }


            img {
                height: 300px;
                object-fit: cover;
            }
        }
    }

    .jianyi {
        margin: 24px 0 40px;
        height: 154px;
        background: #FFF3F3;
        border-radius: 8px;
        border: 1px solid #FFE9E6;
        box-sizing: border-box;
        padding: 24px;

        .jianyiT {
            display: flex;
            align-items: center;

            .xiaoji {
                width: 34px;
                height: 34px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .title1 {
                font-size: 16px;
                font-weight: 600;
                color: #FF0000;
            }
        }

        .con {
            font-size: 14px;
            font-weight: 400;
            color: #353535;
            margin-top: 5px;
        }
    }

    .bnt {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 75px;

        div {
            width: 160px;
            height: 48px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            line-height: 48px;
            cursor: pointer;
        }

        .tian {
            background: #2C68FF;
            font-weight: 500;
            color: #FFFFFF;
            margin-right: 24px;
        }

        .quxiao {
            background: #FFFFFF;
            border: 1px solid #DCDCDC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
        }
    }
}</style>